﻿﻿@model WebApp.Models.CustomerWaterRecord
<!-- 弹出编辑窗体表单 -->
 <div id="customerwaterrecorddetailwindow" class="easyui-window" 
      title="明细数据" 
      data-options="modal:true,
                    closed:true,
                    minimizable:false,
                    collapsible:false,
                    maximized:false,
                    iconCls:'icon-more',
                    footer:'#windowfooter',
                    closeDuration:200,
                    closeAnimation:'slide',
                    openDuration:300,
                    openAnimation:'slide',
                    onBeforeClose:function(){
                      var that = $(this);
                      if(customerwaterrecordhasmodified()){
                        $.messager.confirm('确认','你确定要放弃保存修改的记录?',function(r){
                        if (r){
                          var opts = that.panel('options');
                          var onBeforeClose = opts.onBeforeClose;
                          opts.onBeforeClose = function(){};
                          that.panel('close');
                          opts.onBeforeClose = onBeforeClose;
                          hook = false;
                        }
                        });
                        return false;
                      }
                    },
                    onOpen:function(){
                       $(this).window('vcenter');
                       $(this).window('hcenter');
                    },
                    onRestore:function(){
                    },
                    onMaximize:function(){
                    }
                    " style="width:800px;height:450px;display:none">
  <!-- toolbar -->
  <div class="panel-content py-2 rounded-bottom border-faded border-left-0 border-right-0  text-muted bg-subtlelight-fade sticky-top">
    <div class="row align-items-center m-0">
      <div class="col">
        <div class="btn-group btn-group-sm">
          <button name="saveitembutton" onclick="savecustomerwaterrecorditem()" class="btn btn-default">
            <i class="fal fa-save"></i> @Html.L("Save")
          </button>
        </div>
        <div class="btn-group btn-group-sm" id="deleteitem-btn-group">
          <button onclick="deletecustomerwaterrecorditem()" class="btn btn-danger">
            <i class="fal fa-times"></i> @Html.L("Delete")
          </button>
        </div>
      
      </div>
      <div class="col d-flex">

      </div>
    </div>
  </div>
 <!-- panel container form  -->
  <div class="panel-container show">
    <div class="panel-content">
      <form id="customerwaterrecord_form"
            class="easyui-form form-horizontal padding-10"
            method="post"
            data-options="novalidate:true,
                            onChange: function(target){
                              hook = true;
                              $('button[name*=\'saveitembutton\']').prop('disabled', false);
                             },
                             onLoadSuccess:function(data){
                               hook = false;
                               $('button[name*=\'saveitembutton\']').prop('disabled', true);
                             }">
        @Html.AntiForgeryToken()
        <!--Primary Key-->
        @Html.HiddenFor(model => model.Id)
        @Html.HiddenFor(model => model.CustomerId)
        @Html.HiddenFor(model => model.IsDelete)
        <fieldset class="form-group">
          <div class="row m-1">

            <!--年份-->
            <label class="col-md-2 mb-1 form-label text-right text-danger">@Html.DisplayNameFor(model => model.Year)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.Year)"
                     name="@Html.NameFor(model => model.Year)"
                     value="@Html.ValueFor(model => model.Year)"
                     tabindex="1"
                     class="easyui-numberbox"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.Year)',
								 required:true,readonly:true" />
            </div>
            <!--月份-->
            <label class="col-md-2 mb-1 form-label text-right text-danger">@Html.DisplayNameFor(model => model.Month)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.Month)"
                     name="@Html.NameFor(model => model.Month)"
                     value="@Html.ValueFor(model => model.Month)"
                     tabindex="2"
                     class="easyui-numberspinner"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.Month)',
								 required:true,formatter:intformatter,

                                 " />
            </div>

            <!--表号-->
            <label class="col-md-2 mb-1 form-label text-right text-danger">@Html.DisplayNameFor(model => model.meterId)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.meterId)"
                     name="@Html.NameFor(model => model.meterId)"
                     value="@Html.ValueFor(model => model.meterId)"
                     tabindex="3"
                     class="easyui-combobox"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.meterId)',
								                 required:true,editable:false,
                                 validType: 'length[0,20]',
                                 textField:'meterId',
                                 valueField:'meterId',
                                 url:'/WaterMeters/GetMechWaterMeters',
                                 onSelect: function(rec){
                                  $('#CustomerName').textbox('setValue',rec.CustomerName);
                                  $('#CustomerId').val(rec.CustomerId);
                                  getpreviousData(rec.meterId,rec.CustomerId);
                                 }
                                 " />
            </div>
            <!--表号-->
            <label class="col-md-2 mb-1 form-label text-right ">客户名称</label>
            <div class="col-md-4 mb-1">
              <input id="CustomerName"
                     name="CustomerName"
                     value=""
                     tabindex="3"
                     class="easyui-textbox"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'客户名称',
								 required:false,readonly:true,
                                 validType: 'length[0,50]'
                                 " />
            </div>

            <!--上期抄表日期-->
            <label class="col-md-2 mb-1 form-label text-right ">@Html.DisplayNameFor(model => model.previousDate)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.previousDate)"
                     name="@Html.NameFor(model => model.previousDate)"
                     value="@Html.ValueFor(model => model.previousDate)"
                     tabindex="4"
                     class="easyui-datebox"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.previousDate)',
								 required:false,readonly:true,


                                 " />

            </div>

            <!--上期表见-->
            <label class="col-md-2 mb-1 form-label text-right ">@Html.DisplayNameFor(model => model.previousWater)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.previousWater)"
                     name="@Html.NameFor(model => model.previousWater)"
                     value="@Html.ValueFor(model => model.previousWater)"
                     tabindex="5"
                     class="easyui-numberspinner"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.previousWater)',
								 required:false,formatter:numberformatter,readonly:true,
                                 precision:2,

                                 " />

            </div>


            <!--本期表见-->
            <label class="col-md-2 mb-1 form-label text-right text-danger">@Html.DisplayNameFor(model => model.lastWater)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.lastWater)"
                     name="@Html.NameFor(model => model.lastWater)"
                     value="@Html.ValueFor(model => model.lastWater)"
                     tabindex="6"
                     class="easyui-numberspinner"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.lastWater)',
								                 required:true,
                                 formatter:numberformatter,
                                 precision:2,
                                 onChange:function(v) {
                                 setTimeout(function(){
                                   var v1=$('#previousWater').numberspinner('getValue');
                                   $('#water').numberspinner('setValue',v -  v1);
                                 },100)
                                 
                                 }
                                 " />

            </div>

            <!--本期用水量-->
            <label class="col-md-2 mb-1 form-label text-right text-danger">@Html.DisplayNameFor(model => model.water)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.water)"
                     name="@Html.NameFor(model => model.water)"
                     value="@Html.ValueFor(model => model.water)"
                     tabindex="7"
                     class="easyui-numberspinner"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.water)',
								 required:true,formatter:numberformatter,readonly:true,
                                 precision:2,

                                 " />

            </div>


            <!--抄表日期-->
            <label class="col-md-2 mb-1 form-label text-right text-danger">@Html.DisplayNameFor(model => model.RecordDate)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.RecordDate)"
                     name="@Html.NameFor(model => model.RecordDate)"
                     value="@Html.ValueFor(model => model.RecordDate)"
                     tabindex="8" required
                     class="easyui-datebox"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.RecordDate)',
								 required:true,
								 formatter:dateformatter" />
            </div>

            <!--抄表人-->
            <label class="col-md-2 mb-1 form-label text-right ">@Html.DisplayNameFor(model => model.User)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.User)"
                     name="@Html.NameFor(model => model.User)"
                     value="@Html.ValueFor(model => model.User)"
                     tabindex="9"
                     class="easyui-textbox"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.User)',
								 required:false, validType: 'length[0,20]'
                                 " />
            </div>


            <!--抄表方式-->
            <label class="col-md-2 mb-1 form-label text-right ">@Html.DisplayNameFor(model => model.Type)</label>
            <div class="col-md-4 mb-1">
              <input id="@Html.IdFor(model => model.Type)"
                     name="@Html.NameFor(model => model.Type)"
                     value="@Html.ValueFor(model => model.Type)"
                     tabindex="10"
                     class="easyui-textbox"
                     style="width:100%"
                     type="text"
                     data-options="prompt:'@Html.DisplayNameFor(model => model.Type)',
								 required:false,readonly:true,
                                 validType: 'length[0,10]'
                                 " />
            </div>



          </div>
        </fieldset>
      </form>
    </div>
    </div>
</div>
<div id="windowfooter" style="padding:5px;">&nbsp;</div>
<!-- 弹出窗体form表单 -->
<!-- 弹出编辑对话框 -->

<!--begin popup detailview javascript block -->
<script type="text/javascript">
    //判断新增编辑状态
    var MODELSTATE = 'Added';
    var customerwaterrecordid = null;
    function opencustomerwaterrecorddetailwindow(data,state) {
         MODELSTATE = state;
         initcustomerwaterrecorddetailview();
         customerwaterrecordid = (data.Id || 0);
         $('#customerwaterrecorddetailwindow').window('open');
         $('#customerwaterrecord_form').form('reset');
         $('#customerwaterrecord_form').form('load', data);
  }
  //获取上期抄表记录
  function getpreviousData(meterid, customerid) {
    $.get(`/CustomerWaterRecords/GetPreviousData?meterid=${meterid}&customerid=${customerid}`).done(res => {
      console.log(res)
      if (res) {
        $('#customerwaterrecord_form #lastWater').numberspinner('textbox').validatebox('options').min = res.lastWater;
        $('#customerwaterrecord_form #previousDate').datebox('setValue', moment(res.RecordDate).format('YYYY-MM-DD HH:mm:ss'));
        $('#customerwaterrecord_form #previousWater').numberspinner('setValue', res.lastWater);
      }
    })
  }
  //删除当前记录
  function deletecustomerwaterrecorditem() {
    $.messager.confirm('确认', '你确定要删除该记录?', result => {
      if (result) {
        const url = `/CustomerWaterRecords/Delete/${customerwaterrecordid}`;
        $.get(url).done(res => {
          if (res.success) {
            toastr.success("删除成功");
            $dg.datagrid('reload');
            $('#customerwaterrecorddetailwindow').window('close');
          } else {
            $.messager.alert('错误', res.err, 'error');
          }
        });
      }
    });
  }
    //async 保存数据
    async function savecustomerwaterrecorditem() { 
      const $customerwaterrecordform = $('#customerwaterrecord_form');
      if ($customerwaterrecordform.form('enableValidation').form('validate')) {
            let customerwaterrecord = $customerwaterrecordform.serializeJSON();
            let url = '/CustomerWaterRecords/Edit';
            //判断是新增或是修改方法
            if (MODELSTATE === 'Added') {
                url = '/CustomerWaterRecords/AddRecord';
            }
            var token = $('input[name="__RequestVerificationToken"]', $customerwaterrecordform).val();
            $.messager.progress({ title: '请等待', msg: '正在保存数据...', interval:200});
            $.ajax({
                    type: "POST",
                    url: url,
                    data: {
                        __RequestVerificationToken: token,
                        item:customerwaterrecord
                    },
                    dataType: 'json',
                    contentType: 'application/x-www-form-urlencoded; charset=utf-8'
                })
                .done(response => {
                    $.messager.progress('close');
                    if (response.success) {
                        hook = false;
                        $customerwaterrecordform.form('disableValidation');
                        $dg.datagrid('reload');
                        $('#customerwaterrecorddetailwindow').window("close");
                        toastr.success("保存成功");  
                    } else {
                        $.messager.alert("错误",   response.err, "error");
                    }
                    })
                .fail((jqXHR, textStatus, errorThrown) => {
                       $.messager.progress('close');
                       $.messager.alert('异常', `${jqXHR.status}: ${jqXHR.statusText} `, 'error');
                    });
        }
    }
    //关闭窗口
    function closecustomerwaterrecorddetailwindow() {
        $('#customerwaterrecorddetailwindow').window('close');
    }
    //todo
    function todo() {
         console.log('todo.....');
    }
     //判断是否有没有保存的记录
     function customerwaterrecordhasmodified() {
            return hook;

     }


function initcustomerwaterrecorddetailview() {
  //判断是否显示功能按钮
  if (MODELSTATE === 'Added') {
    $('#deleteitem-btn-group').hide();
  } else {
    $('#deleteitem-btn-group').show();
  }

 
   
}
</script>

